<template>
        <div class="schLine" v-if="!form">
            <div class="itemTitle">{{ title }}</div>
            <el-select :disabled="disabled" :multiple="multiple" v-model="curVal" clearable placeholder="请选择" style="width: 300px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <el-form-item label-width="120px" v-else style="margin:10px 10px" :required="required" :label="title" :prop="field">
            <el-select :disabled="disabled" size="mini" :multiple="multiple" v-model="curVal" clearable placeholder="请选择" :style="{width: (100 * Number(size)) + 'px'}">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        
</template>

<script>
export default {
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        multiple: {
            type: Boolean,
            default: false
        },
        form: {
            type: Boolean,
            default: false
        },
        field: {
            type: String,
            default: ""
        },
        required: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: "标题"
        },
        value: {
            type: [String, Number, Array],
            default: ""
        },
        opType: {
            type: String,
            default: ""
        },
        size: {
            type: [String, Number],
            default: 3
        }
    },

    data() {
        return {
            curVal: "",
            options: []
        }
    },
    created() {
        let localOptions = this.$code[this.opType];
        if (localOptions) {
            this.options = localOptions;
        } else {
            //查询DB
            this.$sys.getOptions({code: this.opType}).then(res => {
                this.options = res.data;
            })
        }
    },
    watch: {
        value: {
            handler(nv, ov) {
                if (this.multiple) {
                    if (nv != "") {
                        this.curVal = nv.split(",");
                    }
                } else {
                    this.curVal = nv;
                }
            },
            immediate: true
        },
        curVal(nv, ov) {
            if (this.multiple) {
                this.$emit("input", nv.join(","));
            } else {
                this.$emit("input", nv);
            }
            
        }
    }
}
</script>

<style lang="scss" scoped></style>